<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-个人中心</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #btn {
        position: absolute;
        left: 50px;
        top: 30px;
      }
      .btn{
        position: absolute;
        width: 135px;
        height: 46px;
        line-height: 46px;
        color: #fff;
        font-size: 20px;
        text-align: center;
        border-radius: 20px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
      }
      #btn-0 { 
        background: #ffa34f;
      }
      #btn-1 {
        background: #36b3ff;
        left: 165px;
      }
      .rule {
        position: absolute;
        height: 255px;
        bottom: 0;
        left: 0;
        right: 0;
      }
      .point-container{
        position: absolute;
        width: 470px;
        height: 295px;
        background: url(./images/point-container.png);
        left: 50%;
        margin-left: -235px;
        margin-top: 100px;
      }
      .point {
        width: 380px;
        height: 200px;
        padding: 20px 40px;
        margin-top: 50px;
        display: table;
        table-layout: fixed;
        color: #fff;
        font-size: 24px;
        line-height: 40px;
      }
      .point-item {
        display: table-cell;
        vertical-align: middle;
      }
      #list {
        position: absolute;
        left: 50px;
        right: 50px;
        top: 100px;
      }
      #list .item {
        position: absolute;
        width: 272px;
        height: 163px;
        border-radius: 15px;
        overflow: hidden;
      }
      #list-0,
      #list-4,
      #list-8 {
        left: 0;
      }
      #list-1,
      #list-5,
      #list-9 {
        left: 302px;
      }
      #list-2,
      #list-6,
      #list-10 {
        left: 604px;
      }
      #list-3,
      #list-7,
      #list-11 {
        left: 906px;
      }
      #list-0,
      #list-1,
      #list-2,
      #list-3 {
        top: 0;
      }
      #list-4,
      #list-5,
      #list-6,
      #list-7 {
        top: 193px;
      }
      #list-8,
      #list-9,
      #list-10,
      #list-11 {
        top: 386px;
      }
      .wrap-item {
        display: none;
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!--联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!--联通不要 -->
      <div id="btn">
        <!-- <div id="btn-0" class="btn item">我的积分</div> -->
        <div id="btn-0" class="btn item">观看历史</div>
      </div>
      <div id="wrap">
        <!-- <div id="container-0" class="wrap-item">
          <div class="point-container">
            <div class="point">
              <div class="point-item" id="point"></div>
            </div>
          </div>
        </div> -->
        <div id="container-1" class="wrap-item">
          <div id="list"></div>
        </div>
      </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/person.js"></script>
    <script>
      var hanlderEnter = {
        list: function (index, id) {
          var data = page.data.history[index]
          console.log(data)
          var form = config.path + '/person.html?elId=' + id
          var to = config.path + "/vod.html?seriesId=" + data.programId
          page.addUrl(to, form)
        },
        btn: function () {

        }
      }

      function getPreFocus() {
        // var nav = utils.getUrlParam("nav", 0)
        // person.nav = nav
        var elId = utils.getUrlParam("elId", "btn-0")
        person.nav = elId === 'btn-0' ? 0 : 0
        var dom = document.getElementById(elId)
        dom && utils.toggleClass(dom)
      }

      function init () {
        page.init()
        dialog.init()
        person.init()
        getPreFocus()
        person.toggle()
        log.commit({
          name: '个人中心页面',
          type1: 'browse',
          type2: 'person',
          starttime: new Date().getTime(),
        })
      }

      function keyUp () {
        if (dialog.visible) return
        var info = utils.getCurInfo()
        var dom = null
        if (info.type == 'btn') return 
        if (info.index <  4) {
          dom = document.getElementById('btn-0')
        } else {
          dom = move.up()
        }
        dom && utils.toggleClass(dom);
      }

      function keyDown () {
        if (dialog.visible) return
        var dom = move.down();
        dom && utils.toggleClass(dom);
      }

      function keyLeft () {
        if (dialog.visible) return
        var info = utils.getCurInfo()
        if (info.type == 'btn' && info.index == 1) {
          person.nav = 0
          person.toggle()
        } 
        var dom = move.left();
        dom && utils.toggleClass(dom);
      }

      function keyRight () {
        if (dialog.visible) return
        var info = utils.getCurInfo()
        if (info.type == 'btn' && info.index == 0) {
          person.nav = 1
          person.toggle()
        } 
        var dom = move.right();
        dom && utils.toggleClass(dom);
      }

      function keyEnter () {
        if (dialog.visible) {
          if (dialog.back) {
            page.goback()
          } else {
            dialog.hide()
          }
        } else {
          var info = utils.getCurInfo()
          hanlderEnter[info.type](info.index, info.id)
        }
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }
    </script>
  </body>
</html>
